<!--
This page enables to simulate the following scenario:
On password form submit, the page's JavaScript deletes that form, creates
another one, almost an exact copy of the deleted form, just with a different
action, and submits the new one.
-->
<html>
  <head>
    <script src="form_utils.js"></script>
    <script>
function preCreatePasswordForm() {
  // Remember the filled in password + destroy the old form.
  var old_password = document.getElementById('password').value;
  document.getElementById('contains-form').innerText = '';
  // Spin the message loop: it's not clear spinning it is needed, but
  // let's make sure the deletion side effects, if any, have time to
  // propagate and don't cause flakes.
  window.setTimeout(createPasswordForm, 0, old_password);
}
function createPasswordForm(old_password) {
  // Create and append the new password form. It is almost the
  // same as the deleted one, only with a different action.
  document.body.appendChild(createSimplePasswordForm());
  // Spin the message loop again, to let the creation settle in.
  window.setTimeout(postCreatePasswordForm, 0, old_password);
}
function postCreatePasswordForm(old_password) {
  // Copy over the old password + add a dummy username, and submit
  // the new form.
  document.getElementById('username').value = 'test';
  document.getElementById('password').value = old_password;
  document.getElementById('submit-button').click();
}
    </script>
    <title>Test dynamically created password form</title>
  </head>
  <body>
    <div id="contains-form">
      <form action="none.html">
        Old Form (to visually distinguish it from the form it is replaced with):
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
        <input type="submit" id="submit-button" value="Don't click!">
      </form>
      <button id="non-form-button" onclick="preCreatePasswordForm();">
        Click!
      </button>
    </div>
  </body>
</html>
